/*
  Ref
  创建ref获取dom元素-input
  作用：获取组件实例、获取DOM
*/

// 导入react和react-dom
import React from 'react';
import ReactDom from 'react-dom/client';

class Handler extends React.Component {
  // 1.创建ref对象
  inputRef = React.createRef();
  handleClick = () => {
    // 获取到当前的标签元素
    console.log('this.inputRef.current -----> ', this.inputRef.current);
    // console.log( 'this.inputRef.current.value -----> ', this.inputRef.current.value );
    //3.通过ref对象.current属性获取dom元素
    this.inputRef.current.focus(); //focus()是JS获取焦点的一个方法
  };
  render() {
    return (
      <div>
        {/* 2.绑定ref给dom元素 */}
        <input type="text" ref={this.inputRef} />
        <button onClick={this.handleClick}>点我看看input</button>
      </div>
    );
  }
}

// 18版本以上新出的挂载方法
const root = ReactDom.createRoot(document.getElementById('root'));
root.render(<Handler></Handler>);
